<template>
  <div style="width: 100%; height: 100%;">
    <div class="treeHeader">
      <Tabs v-model="tabsVal">
        <TabPane :label="$t('m.dàizhōngshěn')" name="name1">
          <WaitAllocation ref="wait" :tabsVal="tabsVal" @getBankInfo="getBankInfo" />
        </TabPane>
        <TabPane :label="$t('m.zhōngshěnwánchéngběnzhànghàozhōngshěnwánchéng')" name="name2">
          <AlreadyAllocation ref="already" :tabsVal="tabsVal" @getBankInfo="getBankInfo" />
        </TabPane>
      </Tabs>
    </div>
    <Modal v-model="baseInfoBox" class="baseInfo_box_title" :title="$t('m.sUI')" width="70%">
      <div class="details_head" v-show="tabsVal !== 'name2'">
        <div class="passButton">
          <Button type="success" class="btn btn-success details_head_first" @click="pass">{{ $t("m.pass") }}</Button>
          <Button type="error" class="btn btn-danger" @click="refuse">{{ $t("m.refuse") }}</Button>
          <Input
            type="text"
            class="remark_inprt"
            v-model="remarkInfo"
            v-bind:placeholder="$t('m.qǐngtiánxiěshěnpībèizhù')"
          />
        </div>
      </div>
      <base-info
        :userId="baseInfoUserId"
        :orderGid="baseInfoOrderGid"
        :baseType="baseInfoType"
        v-if="baseInfoBox"
      ></base-info>
      <div slot="footer"></div>
    </Modal>
    <Modal v-model="paSsModel" @on-ok="cpaSs" @on-cancel>
      <p style="font-size: 20px">{{ $t("m.qǐngquèrèntōngguò") }}</p>
    </Modal>
    <Modal v-model="vetoModel" :title="$t('m.jùjuélǐyóu')" @on-ok="vetoFun" @on-cancel>
      <p class="investor-item">
        <span class="admin-label">{{ $t("m.qǐngquèrènjùjué") }}:</span>
        <Select v-model="reason" style="height: 35px;width: 300px;">
          <Option v-for="(item, index) in reasonList" :value="item.id" :key="index">{{ item.name }}</Option>
        </Select>
      </p>
    </Modal>
  </div>
</template>

<script>
import AlreadyAllocation from './alreadyAllocation';
import WaitAllocation from './waitAllocation';
import BaseInfo from "@/components/common/baseInfo";

export default {
  components: {
    BaseInfo,
    WaitAllocation,
    AlreadyAllocation,
  },
  data() {
    return {
      paSsModel: false,
      vetoModel: false,
      baseInfoBox: false,
      baseInfoUserId: '',
      baseInfoOrderGid: '',
      baseInfoType: '1',
      tabsVal: '',
      remarkInfo: "",
      reason: "",
      reasonList: [
        {
          id: this.$t("m.insideBlack"),
          name: this.$t("m.insideBlack")
        },
        {
          id: this.$t("m.thirdPartBlack"),
          name: this.$t("m.thirdPartBlack")
        },
        {
          id: this.$t("m.fakeCi"),
          name: this.$t("m.fakeCi")
        },
        {
          id: this.$t("m.companyInfoFake"),
          name: this.$t("m.companyInfoFake")
        },
        {
          id: this.$t("m.infoFake"),
          name: this.$t("m.infoFake")
        },
        {
          id: this.$t("m.overTimeIC"),
          name: this.$t("m.overTimeIC")
        },
        {
          id: this.$t("m.icnxun"),
          name: this.$t("m.icnxun")
        },
        {
          id: this.$t("m.tpla"),
          name: this.$t("m.tpla")
        },
        {
          id: this.$t("m.necL"),
          name: this.$t("m.necL")
        },
        {
          id: this.$t("m.necI"),
          name: this.$t("m.necI")
        },
        {
          id: this.$t("m.nee"),
          name: this.$t("m.nee")
        },
        {
          id: this.$t("m.net"),
          name: this.$t("m.net")
        },
        {
          id: this.$t("m.m7od"),
          name: this.$t("m.m7od")
        },
        {
          id: this.$t("m.industryL"),
          name: this.$t("m.industryL")
        },
        {
          id: this.$t("m.LL"),
          name: this.$t("m.LL")
        },
        {
          id: this.$t("m.pL"),
          name: this.$t("m.pL")
        },
        {
          id: this.$t("m.arl"),
          name: this.$t("m.arl")
        },
        {
          id: this.$t("m.other"),
          name: this.$t("m.other")
        }
      ],
      row: {},
    }
  },
  mounted() {
    this.tabsVal = 'name1';
  },
  methods: {
    refuse() {
      if (this.remarkInfo) {
        this.vetoModel = true;
      } else {
        this.$Message.error(this.$t("m.qǐngshūrùbèizhù"));
      }
    },
    pass() {
      this.paSsModel = true;
    },
    // 通过
    cpaSs() {
      const { orderGid } = this.row;
      this.$http
        .post("/api/laocai/check/final/pass", {
          orderGid,
          remarkInfo: this.remarkInfo
        })
        .then(res => {
          if (res.body.code == 0) {
            const tabsVal = this.tabsVal;
            if (tabsVal === 'name1') {
              this.$refs.wait.chuShenQuery();
            } else {
              this.$refs.already.chuShenQuery();
            }
            this.baseInfoBox = false;
          } else {
            this.$Message.error(this.$t("m.errorCode" + res.body.code));
          }
        });
    },
    vetoFun() {
      const { orderGid } = this.row;
      //否单提交操作
      this.$http
        .post("/api/laocai/check/final/reject", {
          orderGid,
          rejectReason: this.reason,
          remarkInfo: this.remarkInfo
        })
        .then(res => {
          if (res.body.code == 0) {
            const tabsVal = this.tabsVal;
            if (tabsVal === 'name1') {
              this.$refs.wait.chuShenQuery();
            } else {
              this.$refs.already.chuShenQuery();
            }
            this.baseInfoBox = false;
          } else {
            this.$Message.error(this.$t("m.errorCode" + res.body.code));
          }
        });
    },
    //  用户信息详情中的功能
    getBankInfo(row) {
      this.remarkInfo = ''
      const { userId, orderGid } = row;
      this.row = row;
      this.baseInfoBox = true;
      this.baseInfoUserId = userId;
      this.baseInfoOrderGid = orderGid;
    },
  }
};
</script>

<style lang="scss" scoped>
.details_head {
  overflow: hidden;
}

.passButton .btn-success {
  /* margin-left: 80px; */
  margin-left: 13%;
}

.passButton button {
  width: 15%;
  display: inline-block;
  margin-top: 0px !important;
  margin-bottom: 10px;
  margin-left: 10px;
}

.remark_inprt {
  margin-left: 50px;
  width: 25%;
}

.treeHeader {
  // margin: 0 px;
  padding-top: 20px;
}
.treeHeader >>> .ivu-tabs-bar{
    margin: 0px 22px;
}
</style>
